<!-- 社区 -->
<template>
  <div>
    <!-- 九宫格 -->
    <van-grid :column-num="5" square icon-size="20px" :border="false">
      <van-grid-item v-for="(val,idx) in grids" :key="idx" :icon="val.img" :text="val.txt"/>
    </van-grid>
    <div style="background-color: #F5F5F5; height: 5px"></div>
    <van-tabs v-model="tabId" sticky swipeable offset-top="74">
      <van-tab title="最近热点">
        <!-- 热点 -->
        <ArticleList :articleList="hotList"></ArticleList>
      </van-tab>
      <van-tab title="最新发布">
        <!-- 热点 -->
        <ArticleList :articleList="newList"></ArticleList>
      </van-tab>
      <van-tab title="最后回复">
        <!-- 热点 -->
        <ArticleList :articleList="replyList"></ArticleList>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import ArticleList from '@/views/article/ArticleList.vue'
export default {
  name: 'Community',
  components: {
    ArticleList: ArticleList
  },
  data () {
    return {
      tabId: 0,
      hotList: [],
      newList: [],
      replyList: [],
      grids: [
        {
          txt: '二手市场',
          img: require('../../assets/icon/car.png'),
          link: 'www.baidu.com'
        },
        {
          txt: '求职招聘',
          img: require('../../assets/icon/home.png'),
          link: 'www.baidu.com'
        },
        {
          txt: '政策动态',
          img: require('../../assets/icon/home.png'),
          link: 'www.baidu.com'
        },
        {
          txt: '便民信息',
          img: require('../../assets/icon/job2.png'),
          link: 'www.baidu.com'
        },
        {
          txt: '同胞互助',
          img: require('../../assets/icon/wx.png'),
          link: 'www.baidu.com'
        },
        {
          txt: '爆料吐槽',
          img: require('../../assets/icon/job2.png'),
          link: 'www.baidu.com'
        },
        {
          txt: '情感茶座',
          img: require('../../assets/icon/car.png'),
          link: 'www.baidu.com'
        },
        {
          txt: '租赁翻译',
          img: require('../../assets/icon/wx.png'),
          link: 'www.baidu.com'
        },
        {
          txt: '家政服务',
          img: require('../../assets/icon/findjob.png'),
          link: 'www.baidu.com'
        },
        {
          txt: '转让创投',
          img: require('../../assets/icon/job2.png'),
          link: 'www.baidu.com'
        }
      ]
    }
  },
  methods: {
    onLoad () {
      // 加载文章列表
      this.$api.getArticleListReq({ type: 0 })
        .then(
          (resp) => {
            this.newList = resp.articleList
            for (let i = 0; i < this.newList.length; i++) {
              if (this.newList[i].readCount > 100) {
                this.hotList.push(this.newList[i])
              }
            }
          }
        )
    }
  },
  mounted () {
    this.onLoad()
  }
}
</script>

<style scoped>

</style>
